<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理 - 巴士运营管理系统</title>
    <style>
        /* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            min-height: 100vh;
            display: flex;
        }
        
        /* Manga/Comic Style Elements */
        .manga-sidebar {
            width: 250px;
            background-color: white;
            border-right: 4px solid black;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100;
            box-shadow: 4px 0 0 rgba(0, 0, 0, 0.2);
        }
        
        .manga-logo {
            padding: 20px;
            text-align: center;
            border-bottom: 4px solid black;
            position: relative;
        }
        
        .manga-logo::after {
            content: '';
            position: absolute;
            bottom: -4px;
            right: 0;
            width: 40px;
            height: 4px;
            background-color: white;
        }
        
        .manga-logo h1 {
            font-size: 20px;
            font-weight: 900;
            letter-spacing: 1px;
            text-shadow: 1px 1px 0 #000;
            -webkit-text-stroke: 0.5px black;
            color: white;
        }
        
        .manga-nav {
            padding: 20px 0;
        }
        
        .manga-nav-item {
            padding: 12px 20px;
            font-weight: bold;
            cursor: pointer;
            position: relative;
            transition: all 0.2s;
            display: flex;
            align-items: center;
        }
        
        .manga-nav-item:hover {
            background-color: #f0f0f0;
        }
        
        .manga-nav-item.active {
            background-color: black;
            color: white;
        }
        
        .manga-nav-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 5px;
            background-color: black;
        }
        
        .manga-nav-item svg {
            margin-right: 10px;
            width: 20px;
            height: 20px;
        }
        
        .manga-main {
            margin-left: 250px;
            padding: 20px;
            width: calc(100% - 250px);
        }
        
        .manga-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid black;
        }
        
        .manga-title {
            font-size: 24px;
            font-weight: 900;
            letter-spacing: 1px;
        }
        
        .manga-user {
            display: flex;
            align-items: center;
            font-weight: bold;
        }
        
        .manga-user svg {
            margin-right: 8px;
            width: 20px;
            height: 20px;
        }
        
        .manga-panel {
            background-color: white;
            border: 3px solid black;
            padding: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 6px 6px 0 #000;
            margin-bottom: 20px;
        }
        
        /* Corner decorations */
        .manga-panel::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 40px;
            background-color: black;
            clip-path: polygon(100% 0, 0 0, 100% 100%);
        }
        
        .manga-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px dashed black;
        }
        
        .manga-panel-title {
            font-size: 18px;
            font-weight: bold;
        }
        
        .manga-button {
            padding: 8px 15px;
            background-color: black;
            color: white;
            font-weight: bold;
            font-size: 14px;
            border: none;
            cursor: pointer;
            transition: transform 0.2s;
            box-shadow: 3px 3px 0 #666;
        }
        
        .manga-button:hover {
            transform: scale(1.05);
        }
        
        .manga-button:active {
            transform: scale(0.95);
            box-shadow: 1px 1px 0 #666;
        }
        
        .manga-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        
        .manga-table th {
            background-color: black;
            color: white;
            text-align: left;
            padding: 10px;
            font-weight: bold;
        }
        
        .manga-table td {
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
        
        .manga-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .manga-table tr:hover {
            background-color: #f0f0f0;
        }
        
        .action-buttons {
            display: flex;
            gap: 5px;
        }
        
        .edit-button, .delete-button {
            padding: 5px 10px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            border: 1px solid black;
        }
        
        .edit-button {
            background-color: white;
            color: black;
        }
        
        .delete-button {
            background-color: black;
            color: white;
        }
        
        .manga-form {
            display: none;
            margin-top: 20px;
            padding: 15px;
            border: 2px dashed black;
            background-color: #f9f9f9;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .manga-label {
            display: block;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .manga-input, .manga-select {
            width: 100%;
            padding: 8px 10px;
            background-color: white;
            border: 2px solid black;
            font-size: 14px;
        }
        
        .manga-input:focus, .manga-select:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
        }
        
        .form-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 15px;
        }
        
        .cancel-button {
            background-color: white;
            color: black;
            border: 2px solid black;
        }
        
        .content-section {
            display: none;
        }
        
        .content-section.active {
            display: block;
        }
        
        .badge {
            display: inline-block;
            padding: 3px 8px;
            font-size: 12px;
            font-weight: bold;
            border-radius: 3px;
        }
        
        .badge-active {
            background-color: black;
            color: white;
        }
        
        .badge-inactive {
            background-color: white;
            color: black;
            border: 1px solid black;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .manga-sidebar {
                width: 60px;
                overflow: hidden;
            }
            
            .manga-logo h1 {
                display: none;
            }
            
            .manga-nav-item span {
                display: none;
            }
            
            .manga-main {
                margin-left: 60px;
                width: calc(100% - 60px);
            }
        }
    </style>
</head>
<body>
    <!-- Sidebar -->
    <div class="manga-sidebar">
        <div class="manga-logo">
            <h1>巴士管理系统</h1>
        </div>
        <nav class="manga-nav">
            <div class="manga-nav-item active" data-section="schedule">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                </svg>
                <span>班次管理</span>
            </div>
            <div class="manga-nav-item" data-section="route">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
                <span>线路管理</span>
            </div>
            <div class="manga-nav-item" data-section="price">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="12" y1="1" x2="12" y2="23"></line>
                    <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                </svg>
                <span>价格管理</span>
            </div>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="manga-main">
        <div class="manga-header">
            <h2 class="manga-title">后台管理系统</h2>
            <div class="manga-user">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                </svg>
                管理员
            </div>
        </div>

        <!-- Schedule Management Section -->
        <div id="schedule-section" class="content-section active">
            <div class="manga-panel">
                <div class="manga-panel-header">
                    <h3 class="manga-panel-title">班次管理</h3>
                    <button class="manga-button" id="add-schedule-btn">添加班次</button>
                </div>
                
                <table class="manga-table">
                    <thead>
                        <tr>
                            <th>班次编号</th>
                            <th>线路</th>
                            <th>发车时间</th>
                            <th>到达时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>SCH001</td>
                            <td>北京 → 上海</td>
                            <td>08:00</td>
                            <td>14:30</td>
                            <td><span class="badge badge-active">运行中</span></td>
                            <td class="action-buttons">
                                <button class="edit-button">编辑</button>
                                <button class="delete-button">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>SCH002</td>
                            <td>广州 → 深圳</td>
                            <td>09:15</td>
                            <td>10:45</td>
                            <td><span class="badge badge-active">运行中</span></td>
                            <td class="action-buttons">
                                <button class="edit-button">编辑</button>
                                <button class="delete-button">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>SCH003</td>
                            <td>成都 → 重庆</td>
                            <td>10:30</td>
                            <td>13:00</td>
                            <td><span class="badge badge-inactive">已停运</span></td>
                            <td class="action-buttons">
                                <button class="edit-button">编辑</button>
                                <button class="delete-button">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <div class="manga-form" id="schedule-form">
                    <h4>添加/编辑班次</h4>
                    <div class="form-group">
                        <label class="manga-label">班次编号：</label>
                        <input type="text" class="manga-input" id="schedule-id">
                    </div>
                    <div class="form-group">
                        <label class="manga-label">线路：</label>
                        <select class="manga-select" id="schedule-route">
                            <option value="">选择线路</option>
                            <option value="1">北京 → 上海</option>
                            <option value="2">广州 → 深圳</option>
                            <option value="3">成都 → 重庆</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="manga-label">发车时间：</label>
                        <input type="time" class="manga-input" id="schedule-departure">
                    </div>
                    <div class="form-group">
                        <label class="manga-label">到达时间：</label>
                        <input type="time" class="manga-input" id="schedule-arrival">
                    </div>
                    <div class="form-group">
                        <label class="manga-label">状态：</label>
                        <select class="manga-select" id="schedule-status">
                            <option value="active">运行中</option>
                            <option value="inactive">已停运</option>
                        </select>
                    </div>
                    <div class="form-buttons">
                        <button class="manga-button cancel-button" id="cancel-schedule">取消</button>
                        <button class="manga-button" id="save-schedule">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Route Management Section -->
        <div id="route-section" class="content-section">
            <div class="manga-panel">
                <div class="manga-panel-header">
                    <h3 class="manga-panel-title">线路管理</h3>
                    <button class="manga-button" id="add-route-btn">添加线路</button>
                </div>
                
                <table class="manga-table">
                    <thead>
                        <tr>
                            <th>线路编号</th>
                            <th>起点</th>
                            <th>终点</th>
                            <th>距离(km)</th>
                            <th>预计时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>RT001</td>
                            <td>北京</td>
                            <td>上海</td>
                            <td>1318</td>
                            <td>6小时30分钟</td>
                            <td class="action-buttons">
                                <button class="edit-button">编辑</button>
                                <button class="delete-button">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>RT002</td>
                            <td>广州</td>
                            <td>深圳</td>
                            <td>140</td>
                            <td>1小时30分钟</td>
                            <td class="action-buttons">
                                <button class="edit-button">编辑</button>
                                <button class="delete-button">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>RT003</td>
                            <td>成都</td>
                            <td>重庆</td>
                            <td>270</td>
                            <td>2小时30分钟</td>
                            <td class="action-buttons">
                                <button class="edit-button">编辑</button>
                                <button class="delete-button">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <div class="manga-form" id="route-form">
                    <h4>添加/编辑线路</h4>
                    <div class="form-group">
                        <label class="manga-label">线路编号：</label>
                        <input type="text" class="manga-input" id="route-id">
                    </div>
                    <div class="form-group">
                        <label class="manga-label">起点：</label>
                        <input type="text" class="manga-input" id="route-start">
                    </div>
                    <div class="form-group">
                        <label class="manga-label">终点：</label>
                        <input type="text" class="manga-input" id="route-end">
                    </div>
                    <div class="form-group">
                        <label class="manga-label">距离(km)：</label>
                        <input type="number" class="manga-input" id="route-distance">
                    </div>
                    <div class="form-group">
                        <label class="manga-label">预计时间：</label>
                        <input type="text" class="manga-input" id="route-duration" placeholder="例如：2小时30分钟">
                    </div>
                    <div class="form-buttons">
                        <button class="manga-button cancel-button" id="cancel-route">取消</button>
                        <button class="manga-button" id="save-route">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Price Management Section -->
        <div id="price-section" class="content-section">
            <div class="manga-panel">
                <div class="manga-panel-header">
                    <h3 class="manga-panel-title">价格管理</h3>
                    <button class="manga-button" id="add-price-btn">添加价格</button>
                </div>
                
                <table class="manga-table">
                    <thead>
                        <tr>
                            <th>价格编号</th>
                            <th>线路</th>
                            <th>座位类型</th>
                            <th>基础价格(¥)</th>
                            <th>折扣</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>PR001</td>
                            <td>北京 → 上海</td>
                            <td>普通座</td>
                            <td>553.00</td>
                            <td>无</td>
                            <td class="action-buttons">
                                <button class="edit-button">编辑</button>
                                <button class="delete-button">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>PR002</td>
                            <td>北京 → 上海</td>
                            <td>商务座</td>
                            <td>933.00</td>
                            <td>无</td>
                            <td class="action-buttons">
                                <button class="edit-button">编辑</button>
                                <button class="delete-button">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>PR003</td>
                            <td>广州 → 深圳</td>
                            <td>普通座</td>
                            <td>82.00</td>
                            <td>85%</td>
                            <td class="action-buttons">
                                <button class="edit-button">编辑</button>
                                <button class="delete-button">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <div class="manga-form" id="price-form">
                    <h4>添加/编辑价格</h4>
                    <div class="form-group">
                        <label class="manga-label">价格编号：</label>
                        <input type="text" class="manga-input" id="price-id">
                    </div>
                    <div class="form-group">
                        <label class="manga-label">线路：</label>
                        <select class="manga-select" id="price-route">
                            <option value="">选择线路</option>
                            <option value="1">北京 → 上海</option>
                            <option value="2">广州 → 深圳</option>
                            <option value="3">成都 → 重庆</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="manga-label">座位类型：</label>
                        <select class="manga-select" id="price-seat-type">
                            <option value="regular">普通座</option>
                            <option value="business">商务座</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="manga-label">基础价格(¥)：</label>
                        <input type="number" step="0.01" class="manga-input" id="price-base">
                    </div>
                    <div class="form-group">
                        <label class="manga-label">折扣(%)：</label>
                        <input type="number" class="manga-input" id="price-discount" placeholder="例如：85表示85%的价格">
                    </div>
                    <div class="form-buttons">
                        <button class="manga-button cancel-button" id="cancel-price">取消</button>
                        <button class="manga-button" id="save-price">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Navigation
        const navItems = document.querySelectorAll('.manga-nav-item');
        const contentSections = document.querySelectorAll('.content-section');
        
        navItems.forEach(item => {
            item.addEventListener('click', () => {
                // Update active nav item
                navItems.forEach(nav => nav.classList.remove('active'));
                item.classList.add('active');
                
                // Show corresponding section
                const sectionId = item.getAttribute('data-section');
                contentSections.forEach(section => {
                    section.classList.remove('active');
                    if (section.id === `${sectionId}-section`) {
                        section.classList.add('active');
                    }
                });
            });
        });
        
        // Schedule Form
        const addScheduleBtn = document.getElementById('add-schedule-btn');
        const scheduleForm = document.getElementById('schedule-form');
        const cancelScheduleBtn = document.getElementById('cancel-schedule');
        const saveScheduleBtn = document.getElementById('save-schedule');
        
        addScheduleBtn.addEventListener('click', () => {
            scheduleForm.style.display = 'block';
            // Clear form fields for new entry
            document.getElementById('schedule-id').value = '';
            document.getElementById('schedule-route').value = '';
            document.getElementById('schedule-departure').value = '';
            document.getElementById('schedule-arrival').value = '';
            document.getElementById('schedule-status').value = 'active';
        });
        
        cancelScheduleBtn.addEventListener('click', () => {
            scheduleForm.style.display = 'none';
        });
        
        saveScheduleBtn.addEventListener('click', () => {
            // Here you would normally save the data
            alert('班次信息已保存！');
            scheduleForm.style.display = 'none';
        });
        
        // Route Form
        const addRouteBtn = document.getElementById('add-route-btn');
        const routeForm = document.getElementById('route-form');
        const cancelRouteBtn = document.getElementById('cancel-route');
        const saveRouteBtn = document.getElementById('save-route');
        
        addRouteBtn.addEventListener('click', () => {
            routeForm.style.display = 'block';
            // Clear form fields for new entry
            document.getElementById('route-id').value = '';
            document.getElementById('route-start').value = '';
            document.getElementById('route-end').value = '';
            document.getElementById('route-distance').value = '';
            document.getElementById('route-duration').value = '';
        });
        
        cancelRouteBtn.addEventListener('click', () => {
            routeForm.style.display = 'none';
        });
        
        saveRouteBtn.addEventListener('click', () => {
            // Here you would normally save the data
            alert('线路信息已保存！');
            routeForm.style.display = 'none';
        });
        
        // Price Form
        const addPriceBtn = document.getElementById('add-price-btn');
        const priceForm = document.getElementById('price-form');
        const cancelPriceBtn = document.getElementById('cancel-price');
        const savePriceBtn = document.getElementById('save-price');
        
        addPriceBtn.addEventListener('click', () => {
            priceForm.style.display = 'block';
            // Clear form fields for new entry
            document.getElementById('price-id').value = '';
            document.getElementById('price-route').value = '';
            document.getElementById('price-seat-type').value = 'regular';
            document.getElementById('price-base').value = '';
            document.getElementById('price-discount').value = '';
        });
        
        cancelPriceBtn.addEventListener('click', () => {
            priceForm.style.display = 'none';
        });
        
        savePriceBtn.addEventListener('click', () => {
            // Here you would normally save the data
            alert('价格信息已保存！');
            priceForm.style.display = 'none';
        });
        
        // Edit buttons functionality
        const editButtons = document.querySelectorAll('.edit-button');
        
        editButtons.forEach(button => {
            button.addEventListener('click', function() {
                const row = this.closest('tr');
                const section = this.closest('.content-section').id;
                
                if (section === 'schedule-section') {
                    // Populate schedule form with row data
                    document.getElementById('schedule-id').value = row.cells[0].textContent;
                    // You would need to map the route text to a value in your select
                    document.getElementById('schedule-departure').value = row.cells[2].textContent;
                    document.getElementById('schedule-arrival').value = row.cells[3].textContent;
                    document.getElementById('schedule-status').value = 
                        row.cells[4].querySelector('.badge').classList.contains('badge-active') ? 'active' : 'inactive';
                    
                    scheduleForm.style.display = 'block';
                } else if (section === 'route-section') {
                    // Populate route form with row data
                    document.getElementById('route-id').value = row.cells[0].textContent;
                    document.getElementById('route-start').value = row.cells[1].textContent;
                    document.getElementById('route-end').value = row.cells[2].textContent;
                    document.getElementById('route-distance').value = row.cells[3].textContent;
                    document.getElementById('route-duration').value = row.cells[4].textContent;
                    
                    routeForm.style.display = 'block';
                } else if (section === 'price-section') {
                    // Populate price form with row data
                    document.getElementById('price-id').value = row.cells[0].textContent;
                    // You would need to map the route text to a value in your select
                    document.getElementById('price-seat-type').value = 
                        row.cells[2].textContent === '普通座' ? 'regular' : 'business';
                    document.getElementById('price-base').value = parseFloat(row.cells[3].textContent);
                    document.getElementById('price-discount').value = 
                        row.cells[4].textContent === '无' ? '' : row.cells[4].textContent.replace('%', '');
                    
                    priceForm.style.display = 'block';
                }
            });
        });
        
          '');
                    
                    priceForm.style.display = 'block';
                }
            });
        });
        
        // Delete buttons functionality
        const deleteButtons = document.querySelectorAll('.delete-button');
        
        deleteButtons.forEach(button => {
            button.addEventListener('click', function() {
                const row = this.closest('tr');
                const id = row.cells[0].textContent;
                
                if (confirm(`确定要删除 ${id} 吗？`)) {
                    // Here you would normally delete the data from your backend
                    // For demo purposes, we'll just remove the row from the table
                    row.remove();
                    alert('删除成功！');
                }
            });
        });
        
        // Add row hover effect
        const tableRows = document.querySelectorAll('.manga-table tbody tr');
        
        tableRows.forEach(row => {
            row.addEventListener('mouseover', function() {
                this.style.transform = 'scale(1.01)';
                this.style.transition = 'transform 0.2s';
                this.style.zIndex = '1';
            });
            
            row.addEventListener('mouseout', function() {
                this.style.transform = 'scale(1)';
                this.style.zIndex = '0';
            });
        });
        
        // Initialize with first section active
        document.querySelector('.manga-nav-item').classList.add('active');
        document.querySelector('.content-section').classList.add('active');
    </script>
</body>
</html>